<template>
  <div class="table-style-view">
    <div style="margin:20px 0;">
      <a href="https://www.jianshu.com/p/b90bccc27a09">【table style 样式地址】</a>
    </div>
    <el-table
      :data="tableData"
      :cell-style="timeStyle"
      :header-cell-style="headStyle"
    >
      <el-table-column
        align="center"
        fixed
        prop="date"
        label="日期"
        width="100"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, idx) in tableNav"
        :key="idx"
        :prop="item.id"
        :label="item.label"
        align="center"
        width="90"
      >
        <template slot-scope="scope">
          <div class="tabel-column-item">
            {{ scope.row[item.id] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <iframe
      style="width: 100%; height: 400px"
      src="https://www.jianshu.com/p/b90bccc27a09"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableNav: [
        {
          id: "g_lprf",
          label: "粤教版",
          color: "#99f4b7",
        },
        {
          id: "g_lprf_ch",
          label: "变化量",
          color: "#99f4b7",
        },
        {
          id: "g_rprf",
          label: "人教版",
          color: "#98ddfc",
        },
        {
          id: "g_rprf_ch",
          label: "变化量",
          color: "#98ddfc",
        },
        {
          id: "g_laln",
          label: "苏教版",
          color: "#9b9eff",
        },
        {
          id: "g_laln_ch",
          label: "变化量",
          color: "#9b9eff",
        },
        {
          id: "g_raln",
          label: "豫教版",
          color: "#dd99ff",
        },
        {
          id: "g_raln_ch",
          label: "变化量",
          color: "#dd99ff",
        },
        {
          id: "g_gage",
          label: "京津冀版",
          color: "#e0ffa1",
        },
        {
          id: "g_gage_ch",
          label: "变化量",
          color: "#e0ffa1",
        },
        {
          id: "g_xlvl",
          label: "陕教版",
          color: "#99ee75",
        },
        {
          id: "g_xlvl_ch",
          label: "变化量",
          color: "#99ee75",
        },
        {
          id: "g_warp_1",
          label: "沪教版",
          color: "#5470c6",
          navColor: "#fff",
        },
        {
          id: "g_warp_1_ch",
          label: "变化量",
          color: "#5470c6",
          navColor: "#fff",
        },
        {
          id: "g_cant",
          label: "香港版本",
          color: "#cd3bfc",
          navColor: "#fff",
        },
        {
          id: "g_cant_ch",
          label: "变化量",
          color: "#cd3bfc",
          navColor: "#fff",
        },
        {
          id: "g_lacc_1",
          label: "台湾版",
          color: "#75fcfb",
        },
        {
          id: "g_lacc_1_ch",
          label: "变化量",
          color: "#75fcfb",
        },
        {
          id: "g_vacc",
          label: "海南版",
          color: "#c15b75",
          navColor: "#fff",
        },
        {
          id: "g_vacc_ch",
          label: "变化量",
          color: "#c15b75",
          navColor: "#fff",
        },
      ],
      tableData: [
        {
          date: "2020-04-15",
          g_lprf: "-0.28",
          g_lprf_ch: null,
          g_rprf: "-0.93",
          g_rprf_ch: null,
          g_laln: "4.77",
          g_laln_ch: null,
          g_raln: "5.00",
          g_raln_ch: null,
          g_gage: "0.23",
          g_gage_ch: null,
          g_xlvl: "1.73",
          g_xlvl_ch: null,
          g_warp_1: "-2.26",
          g_warp_1_ch: null,
          g_cant: "-0.68",
          g_cant_ch: null,
          g_lacc_1: "0.04",
          g_lacc_1_ch: null,
          g_vacc: "0.00",
          g_vacc_ch: null,
        },
        {
          date: "最大值",
          g_lprf: "-0.28",
          g_lprf_ch: null,
          g_rprf: "-0.93",
          g_rprf_ch: null,
          g_laln: "4.77",
          g_laln_ch: null,
          g_raln: "5.00",
          g_raln_ch: null,
          g_gage: "0.23",
          g_gage_ch: null,
          g_xlvl: "1.73",
          g_xlvl_ch: null,
          g_warp_1: "-2.26",
          g_warp_1_ch: null,
          g_cant: "-0.68",
          g_cant_ch: null,
          g_lacc_1: "0.04",
          g_lacc_1_ch: null,
          g_vacc: "0.00",
          g_vacc_ch: null,
        },
        {
          date: "最小值",
          g_lprf: "-0.28",
          g_lprf_ch: "0.00",
          g_rprf: "-0.93",
          g_rprf_ch: "0.00",
          g_laln: "4.77",
          g_laln_ch: "0.00",
          g_raln: "5.00",
          g_raln_ch: "0.00",
          g_gage: "0.23",
          g_gage_ch: "0.00",
          g_xlvl: "1.73",
          g_xlvl_ch: "0.00",
          g_warp_1: "-2.26",
          g_warp_1_ch: "0.00",
          g_cant: "-0.68",
          g_cant_ch: "0.00",
          g_lacc_1: "0.04",
          g_lacc_1_ch: "0.00",
          g_vacc: "0.00",
          g_vacc_ch: "0.00",
        },
      ],
    };
  },
  methods: {
    headStyle({ column }) {
      //   console.log(row, rowIndex, columnIndex);
      let obj = this.tableNav.find((val) => val.id === column.property);
      return `background-color: ${
        obj ? obj.color + " !important" : "#f7f8fa !important"
      }; color:${obj ? obj.navColor || "#000" : "#000"}  !important`;
    },
    timeStyle({ column }) {
      //   console.log(row, rowIndex, columnIndex);
      let obj = this.tableNav.find((val) => val.id === column.property);
      return `background-color: ${obj ? obj.color + "80" : "#fff"}; color:#000`;
    },
  },
};
</script>

<style lang="scss">
.table-style-view {
}
</style>